<template>
  <el-card class="img">
    <img src="../../assets/img/th.jpg"/>
	</div>
    <h1 class="me-author-name Groggy">Groggy</h1>
    <div class="me-author-description">
		<span>
			<i class="el-icon-map-location"></i>{{dizhi}}
		</span>		
		<span><i class="me-icon-job"></i> &nbsp;Vue开发</span>
    </div>
	<div>
		<el-link href="/category/all" target="_blank">
			<h2><span><i class="el-icon-document-copy"></i>文章</span></h2>
		</el-link>
	</div>
    <div class="me-author-tool">
      <i @click="showTool(qq)" :title="qq.title" class="iconfont icon-qq"></i>
      <i @click="showTool(bilibili)" :title="bilibili.title" class="iconfont icon-bilibili-fill"></i>
    </div>
  </el-card>

</template>

<script>
	
  export default {
    name: 'CardMe',
    data() {
      return {
		  dizhi : "北京&昌平",
        qq: {title: 'QQ', message: '2858394889'},
        bilibili: {	
          title: '哔哩哔哩',
          message: '<a target="_blank" href="https://space.bilibili.com/473844125">https://space.bilibili.com/473844125</a>'
        },
      }
    },
    methods: {
      showTool(tool) {
        this.$message({
          duration: 0,
          showClose: true,
          dangerouslyUseHTMLString: true,
          message: '<strong>' + tool.message + '</strong>'
        });
      }
    }
  }
</script>

<style scoped>
  .me-author-name {
    text-align: center;
    font-size: 30px;
    border-bottom: 1px solid #00aaff;
  }

  .me-author-description {
    padding: 8px 0;
  }

  .me-icon-job {
    padding-left: 16px;
  }

  .me-author-tool {
    text-align: center;
    padding-top: 10px;
  }

  .me-author-tool i {
    cursor: pointer;
    padding: 4px 10px;
    font-size: 30px;
  }

.img{
	justify-content: center;
	display: flex;
	border: 5px solid;
	margin: 5px auto;
	position: relative;
	border-image: url(https://skullctf.com/images/skull-border.svg);
	border-image-slice: 32;
	border-image-repeat: round;
	
}
img{
	max-width: 100px;
	max-height: 100px;
	padding-left: 50px;
	border-radius: 80%;
	overflow: hidden;
}
h1{
	color: lightpink;
}
.Groggy{
	filter: brightness(110%);
	    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #e91e63,
	        0 0 35px #e91e63, 0 0 40px #e91e63, 0 0 50px #e91e63, 0 0 75px #e91e63;
	    animation: pink 1.5s ease-in-out infinite alternate;
}
</style>